import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import {
  Card,
  Form, Input, Button
} from 'antd';
import {
  ArrowLeftOutlined,
} from '@ant-design/icons';
import './book_detail.less';
import {reqBookDetail} from "../../../api/book";

// 书籍详情页
class BookDetail extends Component {
  // 返回上一页
  backClick = () => {
    this.props.history.goBack();
  }

  getBookDetail = async (id, data={}) => {
    try {
      const {data: result} = await reqBookDetail(id, data);
      console.log(result);
    }catch (e) {
      console.log(e);
    }
  }

  componentDidMount() {
    this.getBookDetail(this.props.match.params.id)
  }

  render() {
    const {location} = this.props;
    const title = (
      <span>
        <ArrowLeftOutlined style={{cursor: 'pointer'}} onClick={this.backClick}/>
        <h1 className='detail-title'>
          详情页-{location.state.name}
        </h1>
      </span>
    )

    const formItemLayout = {
      labelAlign: 'left',
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4
        }
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
    };

    return (
      <Card title={title}>
        <Form
          name="basic"
          size='middle'
          {...formItemLayout}
          initialValues={{ remember: true }}
        >
          <Form.Item
            label="书名"
            name="name"
            rules={[{ required: true, message: '请输入书名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="作者"
            name="author"
            rules={[{ required: true, message: '请输入作者' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Card>
    )
  }
}

export default withRouter(BookDetail);
